<template>
  <div class="home-con">
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="dd_item">
          <div><img :src="item.img" /></div>
          <div class="dd_text">
            <div>{{ item.name }}</div>
            <div>￥{{ item.price }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <div slot="header" class="box-card-header">
        <span>待处理事务</span>
      </div>
      <div class="thing">
        <div class="things"><span>待付款订单</span><span>（10）</span></div>
        <div class="things"><span>已完成订单</span><span>（5）</span></div>
        <div class="things"><span>待确认收货订单</span><span>（20）</span></div>
        <div class="things"><span>代发货订单</span><span>（30）</span></div>
        <div class="things"><span>新缺货登记</span><span>（6）</span></div>
        <div class="things"><span>待处理退款申请</span><span>（8）</span></div>
        <div class="things"><span>已发货订单</span><span>（12）</span></div>
        <div class="things"><span>待处理退货订单</span><span>（9）</span></div>
        <div class="things"><span>广告位即将到期</span><span>（10）</span></div>
      </div>
    </el-card>
    <div class="thingsliulan">
      <el-card class="liulan">
        <div slot="header" class="box-card-header">
          <span>商品总览</span>
        </div>
        <div class="goods">
          <div><span>100</span><span>已下架</span></div>
          <div><span>400</span><span>已上架</span></div>
          <div><span>50</span><span>库存紧张</span></div>
          <div><span>500</span><span>全部商品</span></div>
        </div>
      </el-card>
      <el-card class="liulan">
        <div slot="header" class="box-card-header">
          <span>用户总览</span>
        </div>
        <div class="user">
          <div><span>100</span><span>今日新增</span></div>
          <div><span>200</span><span>昨日新增</span></div>
          <div><span>1000</span><span>本月新增</span></div>
          <div><span>5000</span><span>会员总数</span></div>
        </div>
      </el-card>
    </div>
    <el-card class="tongji">
      <div slot="header" class="box-card-header">
        <span>订单统计</span>
      </div>

      <div class="tongjicon">
        <div class="ddtj">
          <div><span>本月订单统计</span><span>10000</span><span><span>+10%</span><span>同比上月</span></span></div>
          <div><span>本周订单统计</span><span>1000</span><span><span>-10%</span><span>同比上周</span></span></div>
          <div><span>本月销售总额</span><span>100000</span><span><span>+10%</span><span>同比上月</span></span></div>
          <div><span>本周销售总额</span><span>50000</span><span><span>-10%</span><span>同比上周</span></span></div>
        </div>
        <div id="mychart" style="width: 600px;height:400px;">

        </div>
      </div>

    </el-card>
  </div>
</template>
<script>
export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销售总额",
          price: "5000",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 3,
          name: "昨日销售总额",
          price: "3000",
          img: require("@/assets/images/home_order.png"),
        },
      ],
      daichuliArr: [{ id: 1, name: "代付款订单", num: 10 }],
      option: {

        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    };

  },
  mounted () {
    //调用 画图表的函数
    this.drawLine();
  },
  methods: {
    drawLine () {
      //1.初始化
      let mycharts = this.$echarts.init(document.getElementById("mychart"));
      //2.绘制
      mycharts.setOption(this.option);
    },
  },
};

</script>

<style scoped lang="scss">
.tongjicon {
  display: flex;
}
.echart {
  width: 80%;
}
.tongji {
  margin-top: 20px;
}
.ddtj {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-right: #ccc 1px solid;
  height: 300px;
  width: 20%;
  text-align: center;
}
.ddtj > div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.ddtj > div > span:first-of-type {
  color: #ccc;
}
.ddtj > div > span:nth-of-type(2) {
  font-size: 20px;
  font-weight: 500;
}
.ddtj > div > span:nth-of-type(3) > span:first-of-type {
  color: rgb(76, 168, 76);
}
.ddtj > div:nth-of-type(2n) > span:nth-of-type(3) > span:first-of-type {
  color: red;
}
.home-con .el-card__header {
  background: #ccc;
}
.thingsliulan {
  display: flex;
  margin-top: 20px;
}
.thingsliulan .liulan {
  width: 50%;
  margin-right: 20px;
}
.thingsliulan > div:nth-of-type(2) {
  margin-right: 0;
}
.user {
  padding: 20px 20px 20px 20px;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.user > div > span:first-of-type {
  color: red;
  font-size: 20px;
  font-weight: 500;
}
.user > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods {
  padding: 20px 20px 20px 20px;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.goods > div > span:first-of-type {
  color: red;
  font-size: 20px;
  font-weight: 500;
}
.goods > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box-card {
  margin-top: 20px;
}
.thing {
  display: flex;
  flex-wrap: wrap;
}
.thing .things {
  width: 30%;
  display: flex;
  justify-content: space-between;
  margin: 5px;
  white-space: nowrap;
  border-bottom: #ccc solid 1px;
}
.thing .things > span:last-of-type {
  color: red;
}
.home-con {
  margin: 10px;
}
.dd_item {
  border: 1px solid #ccc;
  margin-top: 50px;
  margin-right: 20px;
  display: flex;
  padding: 10px;
  border-radius: 5px;
  .dd_text {
    padding-left: 10px;
  }
  img {
    width: 50px;
  }
}

.dd_item > div:last-of-type {
  margin-right: 0;
}
</style>
<style>
.el-card__header {
  background: #ccc;
}
</style>